import React, { Component } from 'react'

import TopNavBar from '@/components/TopNavBar'
import Swiper from '@/components/Swiper'

import { getSwiperListApi, getHotCateListApi } from '@/services/feedService'
import SearchBtn from '@/components/SearchBtn'
import HotCate from './ui/HotCate'

import connect from './connect'
import GoodFood from './ui/GoodFood'

import { Toast } from 'antd-mobile';

// 菜谱大全的首页
@connect
class Feed extends Component {
  state = {
    page: 1
  }
  componentDidMount() {
    // all 只要有一个失败都失败
    // race 只看第1个返回的结果
    Promise.all([
      this.props.swiper.length === 0 && this.props.getSwiperListAction(),
      this.props.hotcate.length === 0 && this.props.getHotCateListAction(),
      this.props.goodfood.length === 0 && this.props.getGoodFoodListAction(this.state.page, 10)
    ])
      .then(() => {
        this.setState(
          state => ({ page: state.page + 1 }),
          () => {
            // console.log(this.state.page)
          }
        )
      })
      .catch(() => console.log('error'))
  }

  getData = async () => {
   let len = await this.props.getGoodFoodListAction(this.state.page, 10)
   if(len>0){
     this.setState(state => ({ page: state.page + 1 }))
    //  Toast.info('没有更多的数据了', 3);
   }else{
    Toast.info('没有更多的数据了', 3);
   }
  }

  render() {
    return (
      <div>
        {/* 顶部导航 */}
        <TopNavBar leftText="返回" onLeft={e => console.log(1000, e)}>
          菜谱大全
        </TopNavBar>
        {/* 幻灯片 */}
        <Swiper data={this.props.swiper} />
        {/* 搜索按钮 */}
        <SearchBtn
          onClick={id => {
            this.props.history.push('/search')
          }}
          title="想吃什么搜索这里：如徽菜"
        />
        {/* 热门分类 */}
        <HotCate data={this.props.hotcate} />
        {/* 精品好菜 */}
        <GoodFood data={this.props.goodfood} getData={this.getData} />
      </div>
    )
  }
}

export default Feed
